<template>
  <div class="chartListPane">
    <div class="newsTitle">
      <div class="el-icon-trophy">连红排行榜</div>
    </div>
    <div class="chartInfo" v-for="(chart,index) in charts" :key="index"><!-- v-for 不能写到当前组件的根目录-->
      <span class="chartNo" style="width:60px;margin-left: 50px">{{chart.no}}</span>
      <span class="chartName"  style="width:140px;">{{chart.name}}</span>
      <span class="chartScore"  style="width:60px;">{{chart.value}}</span>
    </div>
  </div>
</template>

<script>
  import api from "../../../../axios/api";
  export default {
    name: "ranklist",
    data(){
      return {
        charts:[]

      }      },
    methods:{
      // setDataFromAxios: function () {
      //   //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
      //   console.log(this.$store.state.host+"/chartController/charts/restaurantTop3byordersize")
      //   api.setDataFromAxios("/api/chartController/charts/restaurantTop3byordersize", null, "get")
      //     .then(dto => {
      //       console.log(dto)
      //       this.charts = dto.tList;
      //     });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      // },
    },
    created() {
      // let  that = this;
      // setInterval(function () {
      //   that.setDataFromAxios();
      // },5000)

    }
  }
</script>

<style scoped lang="stylus">
  .chartListPane

    .newsTitle

      font-size 17px
      margin 10px 0 0 20px
      width 120px
      height 24px
    .el-icon-trophy
      font-weight 600
    .chartInfo
      margin-top 10px
      width : 320px;
      height : 24px;
      padding :  4px 0px



    span
      display : inline-block
      height   100px;
  .chartInfo:nth-child(2) span
    color #e6ef37
  .chartInfo
    &:nth-child(3)
      span
        color #a3a3a3


</style>
